<template>
  <div class="goodsRecomm bg-white flex-col">
    <div class="header items-center">
      <div class="left">
        <img :src="store.storeLogo | changeUrl" alt="" class="logo" mode="aspectFit">
      </div>
      <div class="right flex-col">
        <div class="top flex">
          <span class="name">{{store.storeName}}</span>
          <img src="https://snyz.oss-cn-hangzhou.aliyuncs.com/assets/common/company-auth.png" alt="" class="auth">
          <!-- <div class="auth items-center justify-center">
            <img src="https://snyz.oss-cn-hangzhou.aliyuncs.com/assets/common/company-auth.png" alt="" class="auth-icon">
            企业认证

          </div> -->
        </div>
        <div class="bottom">{{store.companyName}}</div>
      </div>
    </div>
   <!--  <div class="title items-center">
      <span class="tag"></span>
      <span class="name">商品推荐</span>
      <span class="more" @tap="$goStore(storeId)">更多 <img src="../../../assets/goodsDetail/goods-recomm-flow.png" alt="" class="img"></span>
    </div> -->
    <scroll-view class="scroll-content scroll-box" :scroll-x="true">
      <div class="item" v-for="(item, index) in curGoodsList" :key="`goods${index}`" @tap="$goGoodsDeail({ id: item.id })">
        <div class="box flex-col">
          <div class="top">
            <img :src="item.coverUrl" alt="" class="img" mode="aspectFit">
          </div>
          <div class="title ellipsis_1">
            {{item.name}}
          </div>
          <div class="price items-baseline">
            <!-- ￥<span class="big">{{item.int}}</span>{{item.dec ? `.${item.dec}` : ''}}/天 -->
            ￥<span class="big">{{item.minimumRentPrice}}</span>/天
          </div>
          <!-- <div class="old-price items-baseline">
            ￥{{item.int}}/天
          </div> -->
        </div>
      </div>
    </scroll-view>
  </div>
</template>
<script>
  import { mapState } from 'vuex'
  export default {
    props: {
      data: {
        type: Array,
        default: () => []
      },
      store: {
        type: Object,
        default: () => {}
      }
    },
    computed: {
      curGoodsList() {
        return this.data.map(item => {
          return {
            ...item,
            // ...this.$utils.changePrice(item.minimumRentPrice)
          }
        })
      },
      ...mapState('goods', {
        storeId: state => state.storeId
      }),
    },
    data() {
      return {
      }
    },
  }
</script>
<style lang="scss">
  .goodsRecomm {
    padding: 0 10px 10px;
    width: 100%;
    margin-top: 5px;
    // .title {
    //   height: 43px;
    //   .tag {
    //     width: 2px;
    //     height: 17px;
    //     background: #229FFF;
    //     border-radius: 1px;
    //     margin-left: 7px;
    //   }
    //   .name {
    //     font-size: 16px;
    //     font-family: PingFang SC;
    //     font-weight: bold;
    //     line-height: 20px;
    //     color: #282828;
    //     position: relative;
    //     margin-left: 6px;
    //   }
    //   .more {
    //     margin-left: auto;
    //     font-size: 12px;
    //     color: #229FFF;
    //     .img {
    //       width: 5px;
    //       height: 9px;
    //       margin-left: 6px;
    //     }
    //   }
    // }
    .header {
      height: 64px;
      .left {
        margin-left: 2.5px;
        .logo {
          width: 44px;
          height: 44px;
        }
      }
      .right {
        margin-left: 10px;
        margin-top: 2px;
        .top {
          .name {
            color: #333333;
            font-size: 14px;
          }
          .auth {
            width: 58px;
            height: 18px;
            border-radius: 2px;
            margin-left: 6px;
            // .auth-icon {
            //   // width: 11px;
            //   // height: 13px;
            //   margin-right: 2px;
            // }
          }
        }
        .bottom {
          color: #555555;
          font-size: 12px;
          margin-top: 3px;
        }
      }
    }
    .scroll-box {
      .item {
        margin-right: 8px;
        &:last-child {
          margin-right: 0;
        }
      }
      .box {
        width: 110px;
        .top {
          width: 110px;
          height: 74px;
          .img {
            height: 100%;
            width: 100%;
          }
        }
        .title {
          font-size: 12px;
          color: #323232;
          margin-top: 2px;
          max-width: 125px;
          line-height: 22px;
        }
        .price {
          font-size: 16px;
          color: #FF202C;
          line-height: 24px;
        }
        .old-price {
          color: #AAAAAA;
          font-size: 10px;
        }
      }
    }
  }
</style>
